<template>
  <view class="container">
    <!-- Lab Header -->
    <view class="lab-header">
      <swiper 
        class="image-swiper" 
        :indicator-dots="true" 
        :autoplay="true" 
        interval="5000"
      >
        <swiper-item v-for="(image, index) in lab.images" :key="index">
          <image :src="image" mode="aspectFill" class="lab-image"></image>
        </swiper-item>
      </swiper>
      <view class="lab-info">
        <text class="lab-name">{{ lab.name }}</text>
        <view class="status-badge" :class="lab.status.toLowerCase()">
          {{ lab.status }}
        </view>
      </view>
      <view class="meta-info">
        <view class="info-item">
          <u-icon name="map" size="28" color="#666"></u-icon>
          <text>{{ lab.location }}</text>
        </view>
        <view class="info-item">
          <u-icon name="clock" size="28" color="#666"></u-icon>
          <text>{{ lab.operatingHours }}</text>
        </view>
      </view>
    </view>

    <!-- Lab Content -->
    <scroll-view scroll-y class="content-section">
      <!-- Description -->
      <view class="section">
        <text class="section-title">About this Lab</text>
        <text class="description">{{ lab.description }}</text>
      </view>

      <!-- Equipment -->
      <view class="section">
        <text class="section-title">Available Equipment</text>
        <view class="equipment-list">
          <view 
            v-for="(item, index) in lab.equipment"
            :key="index"
            class="equipment-item"
          >
            <image :src="item.image" mode="aspectFill" class="equipment-image"></image>
            <view class="equipment-info">
              <text class="equipment-name">{{ item.name }}</text>
              <text class="equipment-count">{{ item.available }}/{{ item.total }} Available</text>
            </view>
          </view>
        </view>
      </view>

      <!-- Safety Guidelines -->
      <view class="section">
        <text class="section-title">Safety Guidelines</text>
        <view class="guidelines-list">
          <view 
            v-for="(guideline, index) in lab.guidelines"
            :key="index"
            class="guideline-item"
          >
            <u-icon name="checkmark-circle" size="28" color="#4b7bec"></u-icon>
            <text>{{ guideline }}</text>
          </view>
        </view>
      </view>

      <!-- Booking Calendar -->
      <view class="section">
        <text class="section-title">Available Time Slots</text>
        <view class="calendar-section">
          <u-calendar
            :show="true"
            :mode="'date'"
            :min-date="minDate"
            :max-date="maxDate"
            @change="handleDateChange"
          ></u-calendar>
          <view class="time-slots" v-if="selectedDate">
            <text class="selected-date">{{ formatDate(selectedDate) }}</text>
            <view class="slots-grid">
              <view
                v-for="(slot, index) in availableSlots"
                :key="index"
                :class="['time-slot', { 'available': slot.available }]"
                @click="selectTimeSlot(slot)"
              >
                {{ slot.time }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- Action Button -->
    <view class="action-button">
      <u-button 
        type="primary"
        :disabled="!selectedSlot"
        @click="bookLab"
      >Book Lab Session</u-button>
    </view>

    <!-- Booking Confirmation Modal -->
    <u-modal
      :show="showBookingModal"
      title="Confirm Booking"
      @confirm="confirmBooking"
      @cancel="showBookingModal = false"
    >
      <view class="booking-summary">
        <view class="summary-item">
          <text class="label">Lab:</text>
          <text class="value">{{ lab.name }}</text>
        </view>
        <view class="summary-item">
          <text class="label">Date:</text>
          <text class="value">{{ formatDate(selectedDate) }}</text>
        </view>
        <view class="summary-item">
          <text class="label">Time:</text>
          <text class="value">{{ selectedSlot?.time }}</text>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      labId: null,
      selectedDate: null,
      selectedSlot: null,
      showBookingModal: false,
      minDate: new Date().getTime(),
      maxDate: new Date().getTime() + 30 * 24 * 60 * 60 * 1000, // 30 days ahead
      lab: {
        name: 'Anatomy Laboratory A',
        status: 'Available',
        location: 'Building B, Floor 2, Room 205',
        operatingHours: '9:00 AM - 5:00 PM',
        description: 'State-of-the-art anatomy laboratory equipped with modern dissection tables and visualization tools...',
        images: [
          '/static/images/lab1.jpg',
          '/static/images/lab2.jpg',
          '/static/images/lab3.jpg'
        ],
        equipment: [
          {
            name: 'Digital Dissection Table',
            image: '/static/images/equipment1.jpg',
            available: 3,
            total: 4
          },
          {
            name: 'Microscope Station',
            image: '/static/images/equipment2.jpg',
            available: 8,
            total: 10
          }
        ],
        guidelines: [
          'Wear appropriate personal protective equipment',
          'Follow proper waste disposal procedures',
          'No food or drinks allowed',
          'Report any equipment issues immediately'
        ]
      },
      availableSlots: [
        { time: '09:00 - 10:30', available: true },
        { time: '10:45 - 12:15', available: false },
        { time: '13:00 - 14:30', available: true },
        { time: '14:45 - 16:15', available: true },
        { time: '16:30 - 18:00', available: true }
      ]
    }
  },
  onLoad(options) {
    if (options.id) {
      this.labId = options.id
      // TODO: Fetch lab data
    }
  },
  methods: {
    formatDate(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      return date.toLocaleDateString('en-US', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    },
    handleDateChange(e) {
      this.selectedDate = e.timestamp
      this.selectedSlot = null
      // TODO: Fetch available slots for selected date
    },
    selectTimeSlot(slot) {
      if (!slot.available) return
      this.selectedSlot = slot
      this.showBookingModal = true
    },
    async confirmBooking() {
      this.showBookingModal = false
      
      uni.showLoading({
        title: 'Booking lab...'
      })

      try {
        // TODO: Implement booking API call
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        uni.hideLoading()
        uni.showToast({
          title: 'Lab booked successfully',
          icon: 'success'
        })
        
        // Navigate to booking confirmation
        uni.navigateTo({
          url: `/pages/experiment/booking-confirmation?id=${this.labId}&date=${this.selectedDate}&time=${encodeURIComponent(this.selectedSlot.time)}`
        })
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: 'Booking failed',
          icon: 'error'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}

.lab-header {
  background-color: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .image-swiper {
    height: 400rpx;

    .lab-image {
      width: 100%;
      height: 100%;
    }
  }

  .lab-info {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .lab-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      flex: 1;
      margin-right: 20rpx;
    }

    .status-badge {
      padding: 4rpx 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;

      &.available {
        background-color: rgba(46, 213, 115, 0.1);
        color: #2ed573;
      }

      &.occupied {
        background-color: rgba(255, 71, 87, 0.1);
        color: #ff4757;
      }
    }
  }

  .meta-info {
    padding: 0 30rpx 30rpx;
    display: flex;
    gap: 30rpx;

    .info-item {
      display: flex;
      align-items: center;
      gap: 10rpx;
      
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

.content-section {
  flex: 1;
  padding-top: 30rpx;

  .section {
    background-color: #ffffff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;

    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .description {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

.equipment-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
  gap: 20rpx;

  .equipment-item {
    background-color: #f8f9fa;
    border-radius: 8rpx;
    overflow: hidden;

    .equipment-image {
      width: 100%;
      height: 200rpx;
    }

    .equipment-info {
      padding: 16rpx;

      .equipment-name {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
      }

      .equipment-count {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.guidelines-list {
  .guideline-item {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 16rpx;

    text {
      font-size: 28rpx;
      color: #333;
      line-height: 1.4;
    }
  }
}

.calendar-section {
  .time-slots {
    margin-top: 30rpx;

    .selected-date {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
    }

    .slots-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200rpx, 1fr));
      gap: 20rpx;

      .time-slot {
        padding: 20rpx;
        text-align: center;
        border-radius: 8rpx;
        font-size: 26rpx;
        background-color: #f8f9fa;
        color: #999;

        &.available {
          background-color: rgba(75, 123, 236, 0.1);
          color: #4b7bec;
          cursor: pointer;

          &:active {
            opacity: 0.8;
          }
        }
      }
    }
  }
}

.booking-summary {
  padding: 20rpx 0;

  .summary-item {
    display: flex;
    margin-bottom: 16rpx;

    .label {
      font-size: 28rpx;
      color: #666;
      width: 100rpx;
    }

    .value {
      font-size: 28rpx;
      color: #333;
      flex: 1;
    }
  }
}

.action-button {
  padding: 30rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style> 